<template>
  <div id="app">
    <transition name="slide-fade">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
    <transition name="slide-fade">
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
    <div class="layer" v-if="notice">
      <div class="inner-layer">
        <header class="title">{{notice.title}}</header>
        <section class="content" v-html="notice.contents"></section>
        <footer class="mybtn" @click="readMsg">确定</footer>
      </div>
    </div>
  </div>
</template>
<script>
import VConsole from 'vconsole';
import { HB } from '@/assets/commonjs/utils.js';
import { Base } from '@/server/server.js';
import { mapMutations } from 'vuex';
export default {
  name: 'app',
  data() {
    return {
      userName: " ",
      notice: null
    }
  },
  // created(){
  //     if(localStorage.getItem('cookie')) this.getMsg();
  //     setInterval(() => {
  //         if(localStorage.getItem('cookie')) this.getMsg();
  //     }, 180000);
  // },
  mounted: function () {
    // let vConsole = new VConsole();

    this.getData();
    setTimeout(() => {
      HB.autoUpdate();
    }, 3000);
  },
  methods: {
    ...mapMutations(['saveProData']),
    async getData() {
      await Base.getData().then(res => {
        if (res.code == 1) {
          this.saveProData(res.data);
          localStorage.setItem('proData', JSON.stringify(res.data));
        } else
          mui.toast(res.msg || '加载项目信息失敗！')
      })
    },
    getMsg() {
      Base.getMsg().then(res => {
        if (res.code == 1) {
          if (res.data)
            this.notice = res.data;

        } else return;
      })
    },
    readMsg() {
      if (this.notice)
        Base.readMsg({ notice_id: this.notice.id }).then(res => {
          if (res.code == 1) {
            this.notice = null;
            this.getMsg();
          } else mui.toast(res.msg)


        })
    }
  }
}
</script>
<style lang="less">
@import "./assets/style/common.less";
.page {
  background-image: url(./assets/images/new/bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  .body.index-bg {
    position: relative;
    padding-bottom: 380px!important;
    &::after {
      content: '';
      position: fixed;
      bottom:55px;
      left: 0;
      width: 100%;
      height: 154px;
      background: url("./assets/images/new/f1.png");
      background-size: 100%;
      z-index: 999;
    }
    &::before {
      content: '';
      position: fixed;
      bottom:55px;
      left: 0;
      width: 750px;
      height: 375px;
      background: url("./assets/images/new/f2.png") no-repeat;
      background-size: 100%;
      z-index: -1;
    }
  }
}
form {
  padding: 30px;
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}
.tj-form {
  .form-item {
    input {
      background-color: transparent;
      border: none;
      border-bottom: solid 1px #eee;
    }
    input::-webkit-input-placeholder {
      color: #dddddd;
    }
  }
}
.layer {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(1, 1, 1, 0.5);
  z-index: 1;
  top: 0;
  left: 0;
  .inner-layer {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80%;
    border-radius: 30px;
    .transform(translate(-50%, -50%));
    min-height: 300px;
    background-color: white;
    .display-flex();
    flex-direction: column;
    justify-content: space-between;
    .title {
      text-align: center;
      font-size: 32px;
      height: 80px;
      line-height: 80px;
      border-bottom: 1px solid rgba(1, 1, 1, 0.2);
    }
    .content {
      flex: 1;
      padding: 10px 16px;
      /deep/p {
        color: black;
      }
    }
    .mybtn {
      text-align: center;
      width: 100%;
      background-color: @btn-primary-color;
      font-size: 32px;
      color: white;
      height: 80px;
      line-height: 80px;
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px;
    }
  }
}
</style>
<style lang="less">
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函數 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(5px);
  opacity: 0;
}
</style>
